import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
import { randomColor } from "@/const";

export default ({ value, type }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    console.log("value===", value);
    // const legendData = [];
    // value?.afterGroupCurveItemList?.forEach((arr, index) => {
    //   arr && arr[0]?.series && legendData.push(arr[0]?.series);
    // });

    // const colors = legendData?.map((item) => {
    //   return {
    //     name: item,
    //     color: randomColor(),
    //   };
    // });

    const series = {
      symbolSize: 10,
      type: "scatter",
      data:
        value?.sourceList?.map((item) => {
          return [item.x * 1, item.y * 1];
        }) || [],
    };

    const chart = echarts.init(chartRef.current);
    const option = {
      color: "#0074ff",
      tooltip: {
        // https://echarts.apache.org/zh/option.html#tooltip
        show: true,
        trigger: "axis",
        // formatter: "总老化时间:{b} 松弛率:{c}",
        // formatter: function () { // https://echarts.apache.org/zh/option.html#tooltip.formatter
        //   return "y = 2x";
        // },
      },
      // legend: {
      //   top: 10,
      //   type: "scroll", // https://echarts.apache.org/zh/option.html#legend.type
      //   data: legendData,
      // },
      xAxis: {
        type: "value",
        // data: xAsisData,
        name: value.sourceList[0].series, // https://echarts.apache.org/zh/option.html#xAxis.name
        nameLocation: "middle", // https://echarts.apache.org/zh/option.html#xAxis.nameLocation
        nameGap: 40, // https://echarts.apache.org/zh/option.html#xAxis.nameGap
        // min: 0.48,
        // interval: 0.1,
        // max: 0.52,
      },
      yAxis: {
        type: "value",
        name: type === "yl" ? "σ0.4" : "松弛率/%",
        nameLocation: "middle", // https://echarts.apache.org/zh/option.html#xAxis.nameLocation
        nameGap: 40, // https://echarts.apache.org/zh/option.html#xAxis.nameGap
      },
      series: series,
    };

    chart.setOption(option);

    return () => {
      chart.dispose(); // 清理 chart 实例
    };
  }, [value?.sourceList]);

  return <div ref={chartRef} style={{ width: "100%", height: 330 }}></div>;
};
